<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" tyle="text/css" />
<link href="css/Orders.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jquery.reveal.js" type="text/javascript"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script src="js/jquery.sumoselect.min.js" type="text/javascript"></script>
<script src="js/common_js.js" type="text/javascript"></script>
<script src="js/footer.js" type="text/javascript"></script>
<script src="js/jquery.jumpto.js" type="text/javascript"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<title>确认订单界面</title>
</head>
 <script type="text/javascript">
	let totalPrice=0;
	let orderNumber="";
	let token=sessionStorage.getItem("token");
		$(document).ready(function() {
			    // 检查address里是否有数据，没有就执行funImage函数
			    var address = document.getElementById(address);
			    if (!address) {
					consumerId=sessionStorage.getItem('consumerId');
					getAddress(consumerId);
					token=sessionStorage.getItem("token");
					searchOrderDetail(token);
				}
			});

const getAddress = (consumerId) => {
    axios.get("http://localhost:8080/consumer/getAddress", { 
        params: { consumerId },
		}).then((response) => {
        console.log(response.data);
		addressData=response.data;
		funAddress(addressData);
		// sessionStorage.setItem('AddressInfo',JSON.stringify(response.data));
		// window.location.href="Product-detailed.html";
    }).catch(error => {
        console.error("获取地址详情失败:", error);
    });
}
function funAddress(addressData) {
    var str = '<ul class="detailed">';
        str += '<li><label>收货人姓名</label><span>'+addressData.recipientName+'</span></li>';
        str += '<li><label>收件人号码</label><span>'+ addressData.ecipientPhoneNumber +'</span></li>';
        str += '<li><label>省</label><span>'+ addressData.province+'</span></li>';
	    str += '<li><label>市</label><span>'+addressData.city +'</span></li>';
		str += '<li><label>县/区</label><span>'+addressData.district+'</span></li>';
	    str += '<li><label>详细地址</label><span>'+addressData.detailedAddress+'</span></li>';   
    str += '</ul>'; 
    $("#address").html(str);
};

// 动态渲染订单表


const searchOrderDetail = (token) => {
    axios.post("http://localhost:8080/order/list", { token })
        .then(response => {
			if(response.data.length==0){
				alert("订单已支付")
				window.location.href="index.html";
			}
            const promises = response.data.map((orderDetail, index) => 
                axios.get("http://localhost:8080/order/productId", { params: { orderNumber: orderDetail.orderNumber } })
                    .then(res => res.data)
                    .then(productId => axios.post("http://127.0.0.1:8080/product/getProductDetail", { productId }))
                    .then(res => createTableRow(res.data, orderDetail))
            );
			console.log(response.data)
			const orderDetails=response.data;
			orderNumber=orderDetails[0].orderNumber;
			console.log(orderNumber);
			for(var i=0;i<orderDetails.length;i++){
				// totalPrice+=orderDetails[i].totalAmount;
				console.log(totalPrice)
				console.log(orderDetails[i].totalAmount)
				totalPrice+=orderDetails[i].totalAmount;
			}
			console.log("Total Price: ", totalPrice);
			document.getElementById('toPayPrice').textContent = totalPrice.toFixed(2); 
			document.getElementById('reToPayPrice').textContent = totalPrice.toFixed(2); 
            Promise.all(promises)
                .then(rows => {
                    const table = `<table><thead><tr class="title"><td class="name">商品名称</td><td class="price">商品价格</td><td class="Money">金额</td></tr></thead><tbody>${rows.join('')}</tbody></table>`;
                    $("#tb").html(table);
                })
                .catch(error => console.error("获取产品详情失败:", error));
        })
        .catch(error => console.error("获取订单失败:", error));
};
const getProdId = (orderNumber, index, callback) => {
    axios.get("http://localhost:8080/order/productId", { params: { orderNumber } }).then((response) => {
        console.log(response.data);
        let productId = response.data;
        searchProductDetail(productId, index, callback);
    }).catch(error => {
        console.error("获取ProdId失败:", error);
        callback(); // 确保即使有错误也调用callback以计数
    });
};
function createTableRow(productData, orderDetail) {
    return `
        <tr>
            <td class="Product_info">
                <a href="#"><img src="${productData.imageUrl}" width="100px" height="100px"/></a>
                <a href="#" class="product_name">${productData.productName}</a>
            </td>
            <td><i></i>${productData.price}</td>
            <td class="Moneys"><i></i>${orderDetail.totalAmount}</td>
        </tr>
    `;
}
const searchProductDetail = (productId, index, callback) => {
    axios.post("http://127.0.0.1:8080/product/getProductDetail", { productId }).then((response) => {
        console.log(response);
        let productData = response.data;
        str += '<tr>';
        str += '<td class="Product_info">';
        str += '<a href="#"><img src="' + productData.imageUrl + '" width="100px" height="100px"/></a>';
        str += '<a href="#" class="product_name">' + productData.productName + '</a>';
        str += '</td>';
        str += '<td><i></i>' + productData.price * 1.1 + '</td>';
        str += '<td><i></i>' + productData.price + '</td>';
        str += '<td class="Moneys"><i></i>' + orderDetailData[index].totalAmount + '</td>';
        str += '</tr>';
        callback(); // 异步操作完成后调用callback
    }).catch(error => {
        console.error("获取产品详情失败:", error);
        callback(); // 同样确保有错误也调用callback
    });
};
		 
	function fun() {
    var str = ' <table>';
		str += ' <thead><tr class="title"><td class="name">商品名称</td><td class="price">商品价格</td><td class="Preferential">优惠价</td><td class="Quantity">购买数量</td><td class="Money">金额</td></tr></thead>';
		str += ' <tbody>';
	for (var i = 0; i < length; i++) {
        str += ' <tr>';
        str += ' <td class="Product_info">';
        str += '  <a href="#"><img src="images/product_img_17.png"  width="100px" height="100px"/></a>';
        str += ' <a href="#" class="product_name">麻阳冰糖橙子甜橙冰糖柑8斤新鲜水果甜过永兴冰糖橙赣南脐橙包邮</a>';
        str += '  </td>'; 
        str += '<td><i>￥</i>123.00</td>';
        str += ' <td><i>￥</i>112.00</td>';
        str += '<td>2</td>';
        str += ' <td class="Moneys"><i>￥</i>224.00</td>';
        str += ' </tr>';
    }
    str += '</tbody>   </table>'; 
    $("#tb").html(str);
}		 


const toPay = (orderNumber) => {
  // window.open('http://127.0.0.1:8080/alipay/pay?id='+orderNumber,'_self');
  const url = `http://127.0.0.1:8080/alipay/pay?orderNumber=${encodeURIComponent(orderNumber)}&token=${encodeURIComponent(token)}`;
  window.open(url, '_blank');
};
    </script>
<body>
<div id="Orders" class="Inside_pages  clearfix">
  <div class="Orders_style clearfix">
     <div class="address clearfix">
       <div class="title">收货人信息</div>
          <div class="adderss_list clearfix">
            <div class="title_name">选择收货地址 <a href="#">+添加地址</a></div>
             <!--<div class="list" id="select">
            <ul class="confirm active">
            <div class="default">默认地址</div>
            <div class="adderss_operating">
             <div class="Operate"><a href="#" class="delete_btn"></a> <a href="#" class="modify_btn"></a></div>
            </div>
            <div class="user_address">
            <li>小张</li>
            <li>四川成都高新区创业路10号3栋1单元1102式</li>
            <li class="Postcode">610043</li>      
            <li>18908269130</li>
            </div>
            </ul>
             <ul class="">
              <div class="adderss_operating">
             <div class="Operate"><a href="#" class="delete_btn"></a> <a href="#" class="modify_btn"></a></div>
            </div>
             <div class="user_address">
            <li>小张</li>
            <li>四川成都高新区创业路10号3栋1单元1102式</li>
            <li class="Postcode">610043</li>
            <li>18908269130</li>
            </div>
            </ul>
             <ul class="">
              <div class="adderss_operating">
             <div class="Operate"><a href="#" class="delete_btn"></a> <a href="#" class="modify_btn"></a></div>
            </div>
             <div class="user_address">
            <li>小张</li>
            <li>四川成都高新区创业路10号3栋1单元1102式</li>
            <li class="Postcode">610043</li>
            <li>18908269130</li>
            </div>
            </ul>
            </div>
           </div>
-->        <!--收货地址样式-->
     <div class="Shipping_address" id="address">

     </div>
     </div> 
        
     	<form class="form" method="post">  
		<fieldset> 
     <!--快递选择-->
     <div class="express_delivery">
       <div class="title_name">选择快递方式</div>
    
        <ul class="dowebok">
	    <li><input type="radio" name="radio" data-labelauty="圆通快递">
          <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
           <p><a href="#">点击查看是否在配送范围内</a></p>
          </div>
        </li>
	    <li><input type="radio" name="radio" data-labelauty="中通快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
	    <li><input type="radio" name="radio" data-labelauty="申通快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
	    <li><input type="radio" name="radio" data-labelauty="邮政EMS">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
        <li><input type="radio" name="radio" data-labelauty="城际快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：同城包邮</p>
   
          </div>
        </li>
        <li><input type="radio" name="radio" data-labelauty="韵达快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
	    <li><input type="radio" name="radio" data-labelauty="国通快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
	    <li><input type="radio" name="radio" data-labelauty="顺丰快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满88元包邮</p>
          </div>
        </li>
	    <li><input type="radio" name="radio" data-labelauty="邮政小包">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
        <li><input type="radio" name="radio" data-labelauty="天天快递">
         <div class="description">
           <em class="arrow"></em>
           <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
           <p>资费：15元</p>
           <p class="Note">满68元包邮</p>
          </div>
        </li>
        </ul>       
      
     </div>
    
     <!--付款方式-->
     <div class="payment">
      <div class="title_name">支付方式</div>
       <ul>
        <li><input type="radio" name="radio" data-labelauty="余额支付"></li>
        <li><input type="radio" name="radio" data-labelauty="支付宝"></li>
        <li><input type="radio" name="radio" data-labelauty="财付通"></li>
        <li><input type="radio" name="radio" data-labelauty="银联支付"></li>
         <li><input type="radio" name="radio" data-labelauty="货到付款"></li>
       </ul>
     </div>

     <!--产品列表-->
     <div class="Product_List" id="tb">
      <table>
       <thead><tr class="title"><td class="name">商品名称</td><td class="price">商品价格</td><td class="Preferential">优惠价</td><td class="Quantity">购买数量</td><td class="Money">金额</td></tr></thead>
       <tbody>
  
        
       </tbody>
      </table>

      <!--价格-->
      <div class="price_style">
      <div class="right_direction">
        
        <div class="btn"><input name="submit" type="submit" value="提交订单" class="submit_btn"/> <input name="" type="button" value="返回购物车"  class="return_btn"/></div>
        
      </div>
     </div>  
     </fieldset>
        </form>
	
  </div>
  <div class="price_style">
  <div class="right_direction">
    <ul>
     <li><label>商品总价</label><i>￥</i><span id="toPayPrice"></span></li>
     <li><label>配&nbsp;&nbsp;送&nbsp;&nbsp;费</label><i>￥</i><span>0</span></li>
     <li class="shiji_price"><label>实&nbsp;&nbsp;付&nbsp;&nbsp;款</label><i>￥</i><span id="reToPayPrice"></span></li>    
    </ul>   
    <div class="btn"><input name="submit" type="submit" onclick="toPay(orderNumber)" value="立即支付" class="submit_btn"/> 
	<input name="" type="button" value="返回购物车"  class="return_btn"/></div>
     <div class="integral right">待订单确认后，你将获得<span>345</span>积分</div>
  </div>
  </div>
</div>
<script type="text/javascript">

</script>
<script>
$(function(){
	$(':input').labelauty();
});
</script>
</body>
<style>
	/* 基本样式 */  
	.price_style {  
	  width: 100%; /* 或者根据需要设置 */  
	  margin: 20px 0; /* 上下外边距 */  
	  padding: 10px; /* 内边距 */  
	  border: 1px solid #ccc; /* 边框 */  
	  box-sizing: border-box; /* 包括内边距和边框在内的宽度 */  
	}  
	  
	.right_direction {  
	  text-align: right; /* 右对齐 */  
	}  
	  
	.right_direction ul {  
	  list-style: none; /* 移除列表标记 */  
	  padding: 0; /* 移除默认的内边距 */  
	  margin: 0; /* 移除默认的外边距 */  
	}  
	  
	.right_direction ul li {  
	  margin-bottom: 10px; /* 列表项之间的间距 */  
	  font-size: 16px; /* 字体大小 */  
	}  
	  
	.right_direction ul li label {  
	  display: inline-block; /* 内联块级元素，以便设置宽度 */  
	  width: 80px; /* 宽度可以根据需要调整 */  
	}  
	  
	.right_direction .btn {  
	  text-align: right; /* 将按钮组右对齐 */  
	  margin-top: 20px; /* 与上面的列表项之间的间距 */  
	}  
	  
	.right_direction .btn input[type="submit"],  
	.right_direction .btn input[type="button"] {  
	  display: inline-block; /* 使得按钮可以并排显示 */  
	  vertical-align: top; /* 垂直对齐，使得按钮顶部对齐 */  
	  padding: 5px 10px; /* 内边距 */  
	  border: none; /* 移除边框 */  
	  background-color: #4CAF50; /* 提交订单按钮的背景色 */  
	  color: white; /* 文本颜色 */  
	  cursor: pointer; /* 鼠标悬停时显示小手图标 */  
	  margin-left: 5px; /* 提交订单和返回购物车按钮之间的间距 */  
	}  
	  
	.right_direction .btn input[type="button"] {  
	  background-color: #ccc; /* 返回购物车按钮的背景色 */  
	}  
	  
	.integral {  
	  margin-top: 20px; /* 与上面的按钮组之间的间距 */  
	  font-size: 14px; /* 字体大小 */  
	  color: #666; /* 文本颜色 */  
	}  
	  
	.integral span {  
	  font-weight: bold; /* 积分数值加粗 */  
	}  
	  
	/* 特定样式，例如实付款 */  
	.shiji_price span {  
	  color: red; /* 实付款数值颜色为红色 */  
	  font-weight: bold; /* 字体加粗 */  
	}
</style>
</html>
